<template>
    <!-- 总容器 -->
    <div class="wrapper">

        <!-- header部分-->
        <div id='header' class="card">
            <div class="row">
                <div class="col-1"></div>
                <div class="col-2">
                    <img v-if="this.imgflag" :src="user.userImg">
                    <img v-else src="../assets/img/user/person.svg">
                </div>
                <div class="col-5">
                    <div id="username">{{ user.userName }}</div>
                </div>
                <div class="col-4">
                    <div id="unlogin-btn" @click="unLogin">退出登录</div>
                </div>
            </div>
        </div>


        <!-- 财务部分 -->
        <div id="finance" class="card">
            <div class="row">
                <div @click="toVirtualWallet()" id="finance-col" class="col-4">
                    <img src="../assets/img/user/钱包.svg">
                    <p>钱包</p>
                </div>
                <div @click="toCredit()" id="finance-col" class="col-4">
                    <img src="../assets/img/user/积分中心.svg">
                    <p>积分</p>
                </div>
                <div @click="toNotFound()" id="finance-col" class="col-4">
                    <img src="../assets/img/user/红包.svg">
                    <p>红包</p>
                </div>
            </div>
        </div>
        <!-- 功能设置部分 -->
        <div id="options" class="card">
            <div class="row">
                <div id="options-col" @click="toNotFound" class="col-3">
                    <img src="../assets/img/user/我的地址.svg">
                    <p>我的地址</p>
                </div>
                <div id="options-col" @click="toNotFound" class="col-3">
                    <img src="../assets/img/user/我的客服.svg">
                    <p>我的客服</p>
                </div>
                <div id="options-col" @click="toNotFound" class="col-3">
                    <img src="../assets/img/user/用户隐私.svg">
                    <p>用户隐私</p>
                </div>
                <div id="options-col" @click="toNotFound" class="col-3">
                    <img src="../assets/img/user/规则中心.svg">
                    <p>规则中心</p>
                </div>

            </div>
        </div>


        <Footer />

    </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    name: "User",

    data() {
        return {
            user: {},
            imgflag: true,
        }
    },

    created() {
        this.user = this.$getSessionStorage('user');
        if (this.user == null)
            console.log("no user");
        if (this.user.userImg == null)
            this.imgflag = false;
    },

    methods: {
        unLogin() {
            this.$router.push({ path: '/index' });
            this.$removeSessionStorage('user');
        },
        toVirtualWallet() {
            this.$router.push({ path: '/virtualwallet' });
        },
        toCredit() {
            this.$router.push({ path: '/credit' });
        },
        toNotFound() {
            this.$router.push({ path: '/error403' });
        },

    },
    components: {
        Footer,
    },

}

</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgb(248, 248, 250);
}


/****************** header部分 ******************/
.wrapper #header {
    width: 92%;
    height: 13.5vw;
    margin: 6vw 4vw;
    border: solid 2px rgb(229, 233, 239);
    text-align: center;
    justify-content: center;
    background-color: white;

}

.wrapper #header img {
    width: 9vw;
    border-radius: 50%;
}

.wrapper #header #username {
    font-size: 5vw;
    font-weight: bold;
    text-align: left;
}

.wrapper #header #unlogin-btn {
    width: 20vw;
    font-size: 4vw;
    padding: 1.2vw;
    border-radius: 5px;
    background-color: rgb(220, 220, 220);
    color: rgb(100, 100, 100);
}




/****************** 财务部分 ******************/
#finance {
    width: 92vw;
    height: 22vw;
    background-color: white;
    border: solid 2px rgb(229, 233, 239);
    border-radius: 10px;
    margin: 8vw 4vw;
    justify-content: space-around;
}

#finance-col {
    text-align: center;
    font-size: 3.8vw;
    /* font-family: 'kaiti'; */
}

#finance-col img {
    width: 8.5vw;
    height: 8.5vw;
}


/****************** 选项功能部分 ******************/
#options {
    width: 92vw;
    height: 23vw;
    /* background-color: rgb(245, 245, 245); */
    background-color: white;
    border: solid 2px rgb(229, 233, 239);
    border-radius: 10px;
    margin: 8vw 4vw;
    justify-content: center;
}

#options-col {
    text-align: center;
    font-size: 3.8vw;
}

#options-col img {
    width: 7.5vw;
}
</style>